<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>枚举管理</title>
    <link rel="stylesheet" href="/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/animate.min.css">
    <link rel="stylesheet" href="/iconfont/iconfont.css">
</head>
<body>
<div>
    <div style="height: 100%">
        <div style="padding: 20px; background-color: #F2F2F2;height:100%;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">枚举树</div>
                        <div class="layui-card-body" id="toolbarDiv">
                            <ul id="enumTree" class="dtree" data-id="0"></ul>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md9">
                    <div class="layui-card">
                        <div class="layui-card-header" id="card-header">枚举列表</div>
                        <div class="layui-card-body">
                            <table class="layui-hide" id="enumTable" lay-filter="enumTable"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row" id="editDiv" style="display:none;">
        <div class="layui-col-md10">
            <form id="editForm" class="layui-form layui-from-pane" lay-filter="editForm" action=""
                  style="margin-top:20px">
                <input id="id_txt" name="id" type="hidden"/>
                <input id="parentId_txt" name="parentId" type="hidden"/>
                <div class="layui-form-item"><label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                        <input type="text" id="name_txt" name="name"
                               lay-verify="required" autocomplete="off"
                               placeholder="请输入名称" class="layui-input"></div>
                </div>
                <div class="layui-form-item"><label class="layui-form-label">标识</label>
                    <div class="layui-input-block">
                        <input type="text" id="remark_txt" name="remark"
                               lay-verify="required" autocomplete="off"
                               placeholder="请输入标识" class="layui-input"></div>
                </div>
                <div class="layui-form-item"><label class="layui-form-label">值</label>
                    <div class="layui-input-block">
                        <input type="text" id="value_txt" name="value"
                               lay-verify="required" autocomplete="off"
                               placeholder="请输入值" class="layui-input"></div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        上级
                    </label>
                    <div class="layui-input-block">
                        <input type="text" id="parent_txt" name="" class="layui-input layui-disabled">
                    </div>
                </div>

                <div class="layui-form-item" style="margin-top:40px">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-submit " lay-submit="" lay-filter="saveBtn">保存</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/html" id="toolbar">
    <button type="button" class="layui-btn layui-btn-sm permissionBtn" lay-event="systemEnum_add">
        新增
    </button>
</script>

<script type="text/html" id="column-toolbar">
    <button type="button" class="layui-btn layui-btn-xs permissionBtn" lay-event="systemEnum_edit">编辑</button>
    <button type="button" class="layui-btn layui-btn-xs layui-btn-danger permissionBtn" lay-event="systemEnum_delete">
        删除
    </button>
</script>
<script type="text/javascript" src="/js/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/commonjs.js" charset="utf-8"></script>
<script src="/lib/layui/layui.js" charset="utf-8"></script>
<script>
    var parentEnumId = 1;
    var parentEnumName = "枚举";
    layui.config({
        base: '/lib/layui/extend/'
    }).use(['jquery', 'dtree', 'layer', 'table', 'element', 'form'], function () {
        var dtree = layui.dtree,
            layer = layui.layer,
            table = layui.table,
            form = layui.form,
            isSubmit = false;
        var layerIndex;
        var DTree = dtree.render({
            elem: "#enumTree",
            url: "/systemEnum/findAllToDTree",
            dataStyle: "layuiStyle",
            initLevel: 2,   // 初始打开节点级别
            method: "GET",
            dot: false,     // 圆点是否显示
            //toolbar: true,  // 右键工具栏
            menubar: true,  // 树上方工具栏, 展开、收缩、刷新、搜索等
            //toolbarShow: [],
            toolbarScroll: "#toolbarDiv",
            response: {
                statusCode: 0,
                message: "msg",
                treeId: "id",
                parentId: "parentId",
                title: "title"
            }
        });

        table.render({
            elem: '#enumTable',
            url: '/systemEnum/listByParent',
            where: {
                parentId: parentEnumId
            },
            cellMinWidth: 80,
            toolbar: '#toolbar',
            smartReloadModel: true,
            cols: [
                [
                    {type: 'numbers', title: 'ID'},
                    {field: 'id', title: 'ID', hide: true},
                    {field: 'name', title: '名称'},
                    {field: 'remark', title: '标记'},
                    {field: 'value', title: '值'},
                    {title: '操作', align: 'center', toolbar: '#column-toolbar'}
                ]
            ],
            done: function (res, curr, count) {
                initBtnPermission();
            }
        });

        dtree.on("node('enumTree')", function (obj) {
            parentEnumId = obj.param.nodeId;
            parentEnumName = obj.param.context;
            table.reload('enumTable', {
                where: {
                    parentId: parentEnumId
                }
            });
            $("#card-header").html("[" + parentEnumName + "]的子菜单");
            $("#parent_txt").val(parentEnumName);
            $("#parentId_txt").val(parentEnumId);
        });

        table.on('toolbar(enumTable)', function (obj) {
            var event = obj.event;
            $("#parent_txt").val(parentEnumName);
            $("#parentId_txt").val(parentEnumId);
            if (event === 'systemEnum_add') {
                add("新增");
            }
        });

        table.on('tool(enumTable)', function (obj) {
            var data = obj.data;
            var event = obj.event;
            if (event === 'systemEnum_edit') {
                form.val("editForm", data); // 给editForm赋值
                $("#parent_txt").val(parentEnumName);
                add("编辑");
            } else if (event === 'systemEnum_delete') {
                del(data.id);
            }
        });

        function del(id) {
            layer.confirm("确定删除枚举吗?如果存在下级节点则一并删除！", {icon: 3, title: '提示'},
                function (index) {
                    $.get('/systemEnum/deleteEnum/' + id, function (data) {
                        layer.close(index);
                        if (data.code == 0) {
                            layer.msg('删除成功', {time: 3000, icon: 6});
                            table.reload("enumTable");
                            DTree.menubarMethod().refreshTree();
                        } else
                            layer.msg('删除失败', {time: 3000, icon: 2});
                    });
                }, function (index) {
                    layer.close(index);
                }
            );
        }

        function add(title) {
            layerIndex = layer.open({ //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                type: 1,
                title: title,
                area: ['550px', '500px'],
                content: $("#editDiv"), //引用的弹出层的页面层的方式加载修改界面表单
                end: function () {
                    refresh();
                }
            });
        }

        function refresh() {
            if (isSubmit) {
                table.reload("enumTable");
                DTree.menubarMethod().refreshTree();
                isSubmit = false;
            }
            $("#editForm")[0].reset();
            $("input[type='hidden']").val("");
        }

        form.on('submit(saveBtn)', function (form) {
            $.ajax({ // 注：这里必须是$.ajax 不能是$.post,其他页面同
                url: '/systemEnum/save',
                dataType: 'json',
                contentType: 'application/json', // 这句是必须的，不然java收不到，而$.post默认参数是application/x-www-form…… 且无法修改
                type: 'post',
                data: JSON.stringify(form.field),
                success: function (data, status) {
                    if (data.code == 0) {
                        layer.msg('保存成功', {time: 3000, icon: 6});
                        layer.close(layerIndex)
                    } else
                        layer.msg('保存失败', {icon: 2});
                },
                error: function (data, status) {
                    layer.msg('请求失败', {icon: 2});
                }
            });
            isSubmit = true;
            return false;  //  这句是必须的 否则会提交两次
        });
    });
</script>
</body>
</html>